93:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1xyqhkjis7kca.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2w039ilfkalg6.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1xyqhkjis7kca.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/2w039ilfkalg6.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_FGkSfmkvsJh1nsae6sDC8oKH4uGX"],"SWRDataProvider"] 95:T11c9,"use client" import { useState } from "react" import { Pencil } from 'lucide-react' import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export default function Component() { const [isEditing, setIsEditing] = useState(false) const [email, setEmail] = useState("yadwinder@gmail.com") const [newEmail, setNewEmail] = useState("") const [isVerifying, setIsVerifying] = useState(false) const [otp, setOtp] = useState(["", "", "", "", "", ""]) const handleContinue = () => { setIsVerifying(true) } const handleVerify = () => { // Here you would typically verify the OTP with your backend setEmail(newEmail) setIsEditing(false) setIsVerifying(false) setNewEmail("") setOtp(["", "", "", "", "", ""]) } const handleOtpChange = (index: number, value: string) => { const newOtp = [...otp] newOtp[index] = value setOtp(newOtp) // Move focus to the next input if (value && index < 5) { const nextInput = document.getElementById(`otp-${index + 1}`) if (nextInput) { nextInput.focus() } } } return (

{isEditing && (

{isVerifying ? "Verify your email" : "Change email address"}

{isVerifying ? `Enter the 6-digit code sent to ${newEmail}` : "A text message containing a 6-digit OTP will be sent to this email address for verification."}

{!isVerifying ? (

New email address setNewEmail(e.target.value)} />

) : (

Verification code

{otp.map((digit, index) => ( handleOtpChange(index, e.target.value)} /> ))}

)}

) }89:["$","$L93",null,{"chatId":"KgiNhScXa1Q","children":["$","$L94",null,{"data":{"@\"active-block\",\"KgiNhScXa1Q\",":{"id":"b_GZOdoW4Iari","messageId":"CR6x6XrqM9u1bMzl4085kISq2584Qcck","source":"$95","language":"typescriptreact","type":"react","closed":true,"meta":{"file":"email-change-dialog.tsx","type":"react","project":"Email Change"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"KgiNhScXa1Q\",":false,"":null},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This